<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    
    <!--
    <title>{JARVIS}Admin</title>
    -->
    <title>TriAquae 3.0</title>
    <meta name="description" content="">
    <meta name="author" content="">
    
    <!-- http://davidbcalhoun.com/2010/viewport-metatag -->
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!--// OPTIONAL & CONDITIONAL CSS FILES //-->   
    <!-- date picker css -->
    <link rel="stylesheet" href="/static/css/datepicker.css?v=1">
    <!-- full calander css -->
    <link rel="stylesheet" href="/static/css/fullcalendar.css?v=1">
    <!-- data tables extended CSS -->
    <link rel="stylesheet" href="/static/css/TableTools.css?v=1">
    <!-- bootstrap wysimhtml5 editor -->
    <link rel="stylesheet" href="/static/css/bootstrap-wysihtml5.css?v=1">
    <link rel="stylesheet" href="/static/css/wysiwyg-color.css">
    <!-- custom/responsive growl messages -->
    <link rel="stylesheet" href="/static/css/toastr.custom.css?v=1">
    <link rel="stylesheet" href="/static/css/toastr-responsive.css?v=1">
    <link rel="stylesheet" href="/static/css/jquery.jgrowl.css?v=1">
    
    <!-- // DO NOT REMOVE OR CHANGE ORDER OF THE FOLLOWING // -->
    <!-- bootstrap default css (DO NOT REMOVE) -->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css?v=1">
    <link rel="stylesheet" href="/static/css/bootstrap-responsive.min.css?v=1">
    <!-- font awsome and custom icons -->
    <link rel="stylesheet" href="/static/css/font-awesome.min.css?v=1">
    <link rel="stylesheet" href="/static/css/cus-icons.css?v=1">
    <!-- jarvis widget css -->
    <link rel="stylesheet" href="/static/css/jarvis-widgets.css?v=1">
    <!-- Data tables, normal tables and responsive tables css -->
    <link rel="stylesheet" href="/static/css/DT_bootstrap.css?v=1">
    <link rel="stylesheet" href="/static/css/responsive-tables.css?v=1">
    <!-- used where radio, select and form elements are used -->
    <link rel="stylesheet" href="/static/css/uniform.default.css?v=1">
    <link rel="stylesheet" href="/static/css/select2.css?v=1">
    <!-- main theme files -->
    <link rel="stylesheet" href="/static/css/theme.css?v=1">
    <link rel="stylesheet" href="/static/css/theme-responsive.css?v=1">
    
    <!-- // THEME CSS changed by javascript: the CSS link below will override the rules above // -->
    <!-- For more information, please see the documentation for "THEMES" -->
    <link rel="stylesheet" id="switch-theme-js" href="/static/css/themes/default.css?v=1">   
    
    <!-- To switch to full width -->
    <link rel="stylesheet" id="switch-width" href="/static/css/full-width.css?v=1">
    
    <!-- Webfonts -->
    <!-- disable by zp
    <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Lato:300,400,700' type='text/css'>
    -->
    
    <!-- All javascripts are located at the bottom except for HTML5 Shim -->
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <script src="js/include/respond.min.js"></script>
    <![endif]-->
    
    <!-- For Modern Browsers -->
    <link rel="shortcut icon" href="/static/img/favicons/favicon.png">
    <!-- For everything else -->
    <link rel="shortcut icon" href="/static/img/favicons/favicon.ico">
    <!-- For retina screens -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/static/img/favicons/apple-touch-icon-retina.png">
    <!-- For iPad 1-->
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/static/img/favicons/apple-touch-icon-ipad.png">
    <!-- For iPhone 3G, iPod Touch and Android -->
    <link rel="apple-touch-icon-precomposed" href="/static/img/favicons/apple-touch-icon.png">
    
    <!-- iOS web-app metas -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- Add your custom home screen title: -->
    <meta name="apple-mobile-web-app-title" content="Jarvis"> 

    <!-- Startup image for web apps -->
    <link rel="apple-touch-startup-image" href="/static/img/splash/ipad-landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">
    <link rel="apple-touch-startup-image" href="/static/img/splash/ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
    <link rel="apple-touch-startup-image" href="/static/img/splash/iphone.png" media="screen and (max-device-width: 320px)">
    <link rel="stylesheet" href="/static/css/jquery-ui.min.css" />
    </head>
    <script src="/static/js/libs/jquery.min.js"></script>
    <script src="/static/js/libs/jquery.ui.min.js"></script>
    

  <body>
    <!-- .height-wrapper -->
    <div class="height-wrapper">
        
        <!-- header -->
        <header>
            <!-- tool bar -->
            <div id="header-toolbar" class="container-fluid">
                <!-- .contained -->
                <div class="contained">
                    
                    <!-- theme name -->
                    <h1> TriAquae 3.0<span class="hidden-phone">{{ theme }}</span> </h1>
                    <!-- end theme name -->
                    <div class="pull-right">
						<div id="theme-switcher" class="btn-toolbar">
							<div class="btn-group hidden-phone">
								<a data-toggle="dropdown" class="btn btn-small btn-inverse dropdown-toggle" href="javascript:void(0)">Themes <span class="caret"></span></a>
								<ul class="dropdown-menu toolbar pull-right" id="theme-links-js">
									<li>
										<a data-rel="purple" href="javascript:void(0)"><i class="icon-sign-blank purple-icon"></i>Royal Purple</a>
									</li>
									<li>
										<a data-rel="blue" href="javascript:void(0)"><i class="icon-sign-blank navyblue-icon"></i>Navy Blue</a>
									</li>
									<li>
										<a data-rel="green" href="javascript:void(0)"><i class="icon-sign-blank green-icon "></i>Emerald</a>
									</li>
									<li>
										<a data-rel="darkred" href="javascript:void(0)"><i class="icon-sign-blank red-icon "></i>Dark Rose</a>
									</li>
									<li>
										<a data-rel="default" href="javascript:void(0)"><i class="icon-sign-blank grey-icon"></i>Default</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
                </div>
                <!-- end .contained -->
            </div>
            <!-- end tool bar -->
            
        </header>
        <!-- end header -->
        
        <div id="main" role="main" class="container-fluid">
            
            <div class="contained">
                <!-- aside -->  
                <aside> 
                    
                    <!-- search box -->
                    <!--
                    <div class="main-search">
                        <label for="main-search"><i class="icon-search"></i></label>
                        <input id="main-search" type="text" placeholder="Search...">
                    </div>
                    -->
                    <div class="divider"></div>
                    <!-- end search box -->
                                        
                    <!-- aside item: Mini profile -->
                    <div class="my-profile">
                        <a href="javascript:void(0)" class="my-profile-pic">
                            <img src="/static/img/avatar/avatar_0.jpg" alt="" />
                        </a>
			<span class="first-child">Welcome <strong> {{user.username}} </strong> to use TriAquae!</strong></span>
                        <!--
                        <span><a href="javascript:void(0);">Edit Profile </a></span>
                        -->
                    </div>
                    <div class="divider"></div>
                    <!-- end aside item: Mini profile -->

                    <!-- aside item: Menu -->
                    <div class="sidebar-nav-fixed">
                        
                <!--        <ul class="menu" id="accordion-menu-js">
                            <li>
                                <a href="/">Dashboard</a>
                            </li>
                            <li>
                                <a href="/server_status">Server Status</a>
                            </li>
                            <li>
                                <a href="/command_execution">Command Execution</a>
                            </li>
                            <li>
                                <a href="/file_transfer">File Transfer</a>
                            </li>
                            <li>
                                <a href="/assets_management">Assets Management</a>
                            </li>
                            <li>
                                <a href="javascript:void(0)">Log</span></a>
                            </li>
                        </ul>-->
                        <ul class="menu" id="accordion-menu-js">
                            <li >
                                <a href="javascript:void(0)"><i class="icon-off"></i>Dashboard<span class="badge">2</span></a>
                                <ul>
                                    <li>
                                        <a href="/showDashboard" class="expanded" >Dashboard</a> 
                                    </li>
                                    <li>
                                        <a href="javascript:void(0);" class="logout-js" data-rel="/login" >Log Out</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="">
                                <a href="javascript:void(0)"><i class="icon-check"></i>Server Management<span class="badge">2</span></a>
                                <ul>
                                    <li>
                                        <a href="/command_execution">Command Execution</a>
                                    </li>
                                    <li>
                                        <a href="/file_transfer">File Transfer</a>
                                    </li>
                                    <!--
                                    <li>
                                        <a href="/server_configuration">Server Configuration</a>
                                    </li>
                                    <li>
                                        <a href="/job_schedule">Job Schedule</a>
                                    </li>
                                    -->
                                </ul>
                            </li>
                            <li>
                                <a href="/server_status"><i class="icon-check"></i>Server Status</a>
                            </li>
                            <li class="">
                                <a href="/assets_management"><i class="icon-check"></i>Assets Management</a>
                            </li>
                            <li class="">
                                <a href="/admin/hosts/opslog/"><i class="icon-user"></i>Log</span></a>
                            </li>
                        <!--    <li class="">
                                <a href="javascript:void(0)"><i class="icon-signal"></i>Settings</a>
                            </li>-->
                        </ul>                       
                        
                    </div>
                </aside>
                <!-- aside end -->
                
                {% block page-content %}{% endblock %}
            
            </div>
            
        </div><!--end fluid-container-->
        <!--
        <div class="push"></div>
        -->
    </div>
    <!-- end .height wrapper -->
    
    <!-- footer -->
    
    <!-- if you like you can insert your footer here -->
    
    <!-- end footer -->

    <!--================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    
    <!-- Link to Google CDN's jQuery + jQueryUI; fall back to local
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> -->
    <script>window.jQuery || document.write('<script src="/static/js/libs/jquery.min.js"><\/script>')</script>
        <!-- OPTIONAL: Use this migrate script for plugins that are not supported by jquery 1.9+ -->
        <!-- DISABLED <script src="js/libs/jquery.migrate-1.0.0.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> -->
    <script>window.jQuery.ui || document.write('<script src="/static/js/libs/jquery.ui.min.js"><\/script>')</script>
    
    <!-- IMPORTANT: Jquery Touch Punch is always placed under Jquery UI -->
    <script src="/static/js/include/jquery.ui.touch-punch.min.js"></script>
    
    <!-- REQUIRED: Mobile responsive menu generator -->
    <script src="/static/js/include/selectnav.min.js"></script>

    <!-- REQUIRED: Datatable components -->
    <script src="/static/js/include/jquery.accordion.min.js"></script>

    <!-- REQUIRED: Toastr & Jgrowl notifications  -->
    <script src="/static/js/include/toastr.min.js"></script>
    <script src="/static/js/include/jquery.jgrowl.min.js"></script>
    
    <!-- REQUIRED: Sleek scroll UI  -->
    <script src="/static/js/include/slimScroll.min.js"></script>
    
    <!-- REQUIRED: Datatable components -->
    <script src="/static/js/include/jquery.dataTables.min.js"></script>
    <script src="/static/js/include/DT_bootstrap.min.js"></script>

    <!-- REQUIRED: Form element skin  -->
    <script src="/static/js/include/jquery.uniform.min.js"></script>

    <!-- REQUIRED: AmCharts  -->
    <script src="/static/js/include/amchart/amcharts.js"></script>
    <script src="/static/js/include/amchart/amchart-draw1.js"></script>

    <script type="text/javascript">
        var ismobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));  
        if(!ismobile){
            
            /** ONLY EXECUTE THESE CODES IF MOBILE DETECTION IS FALSE **/
            
            /* REQUIRED: Datatable PDF/Excel output componant */
            
            document.write('<script src="/static/js/include/ZeroClipboard.min.js"><\/script>'); 
            document.write('<script src="/static/js/include/TableTools.min.js"><\/script>'); 
            document.write('<script src="/static/js/include/select2.min.js"><\/script>');
            document.write('<script src="/static/js/include/jquery.excanvas.min.js"><\/script>');
            document.write('<script src="/static/js/include/jquery.placeholder.min.js"><\/script>');
            
        }else{
            
            /** ONLY EXECUTE THESE CODES IF MOBILE DETECTION IS TRUE **/
            
            document.write('<script src="/static/js/include/selectnav.min.js"><\/script>');
        }
    </script>

    <!-- REQUIRED: iButton -->
    <script src="/static/js/include/jquery.ibutton.min.js"></script>
    
    <!-- REQUIRED: Justgage animated charts -->
    <script src="/static/js/include/raphael.2.1.0.min.js"></script>
    <script src="/static/js/include/justgage.min.js"></script>
    
    <!-- REQUIRED: Morris Charts -->
    <script src="/static/js/include/morris.min.js"></script> 
    <script src="/static/js/include/morris-chart-settings.js"></script> 
    
    <!-- REQUIRED: Animated pie chart -->
    <script src="/static/js/include/jquery.easy-pie-chart.min.js"></script>
    
    <!-- REQUIRED: Functional Widgets -->
    <script src="/static/js/include/jarvis.widget.min.js"></script>
    <script src="/static/js/include/mobiledevices.min.js"></script>
    <!-- DISABLED (only needed for IE7 <script src="js/include/json2.js"></script> -->
    
    <!-- REQUIRED: Full Calendar -->
    <script src="/static/js/include/jquery.fullcalendar.min.js"></script>       
    
    <!-- REQUIRED: Flot Chart Engine -->
    <script src="/static/js/include/jquery.flot.cust.min.js"></script>          
    <script src="/static/js/include/jquery.flot.resize.min.js"></script>        
    <script src="/static/js/include/jquery.flot.tooltip.min.js"></script>       
    <script src="/static/js/include/jquery.flot.orderBar.min.js"></script>  
    <script src="/static/js/include/jquery.flot.fillbetween.min.js"></script>   
    <script src="/static/js/include/jquery.flot.pie.min.js"></script>    
    
    <!-- REQUIRED: Sparkline Charts -->
    <script src="/static/js/include/jquery.sparkline.min.js"></script>

    <!-- REQUIRED: Infinite Sliding Menu (used with inbox page) -->
    <script src="/static/js/include/jquery.inbox.slashc.sliding-menu.js"></script> 

    <!-- REQUIRED: Form validation plugin -->
    <script src="/static/js/include/jquery.validate.min.js"></script>
    
    <!-- REQUIRED: Progress bar animation 
    <script src="/static/js/include/bootstrap-progressbar.min.js"></script> -->
    
    <!-- REQUIRED: wysihtml5 editor -->
    <script src="/static/js/include/wysihtml5-0.3.0.min.js"></script>
    <script src="/static/js/include/bootstrap-wysihtml5.min.js"></script>

    <!-- REQUIRED: Masked Input -->
    <script src="/static/js/include/jquery.maskedinput.min.js"></script>
    
    <!-- REQUIRED: Bootstrap Date Picker -->
    <script src="/static/js/include/bootstrap-datepicker.min.js"></script>

    <!-- REQUIRED: Bootstrap Wizard -->
    <script src="/static/js/include/bootstrap.wizard.min.js"></script> 
    
    <!-- REQUIRED: Bootstrap Color Picker -->
    <script src="/static/js/include/bootstrap-colorpicker.min.js"></script>
    
    <!-- REQUIRED: Bootstrap Time Picker -->
    <script src="/static/js/include/bootstrap-timepicker.min.js"></script> 
    
    <!-- REQUIRED: Bootstrap Prompt -->
    <script src="/static/js/include/bootbox.min.js"></script>
    
    <!-- REQUIRED: Bootstrap engine -->
    <script src="/static/js/include/bootstrap.min.js"></script>
    
    <!-- DO NOT REMOVE: Theme Config file -->
    <script src="/static/js/config.js"></script>
    
    <!-- d3 library placed at the bottom for better performance -->
    <!-- DISABLED  <script src="js/include/d3.v3.min.js"></script> -->
    <!-- DISABLED  <script src="js/include/adv_charts/d3-chart-1.js"></script> -->
    <!-- DISABLED  <script src="js/include/adv_charts/d3-chart-2.js"></script> -->

    <!-- Google Geo Chart -->
    <!-- DISABLED <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script> -->
    <!-- DISABLED <script type='text/javascript' src='https://www.google.com/jsapi'></script>-->
    <!-- DISABLED <script src="js/include/adv_charts/geochart.js"></script> -->

    <!-- zp add for table filter -->
    <script src="/static/js/include/assets_filter_table.js"></script>
    
    <!-- end scripts -->
  </body>
</html>
